<template>
  <svg v-if="svgIcon"
       aria-hidden
       class="ju-icon svg-icon"
       :style="styles"
       xmlns="http://www.w3.org/2000/svg">
    <use xlink="http://www.w3.org/1999/xlink"
         :xlink:href="`#${icon}`" />
  </svg>
  <i v-else
     aria-hidden
     class="ju-icon"
     :class="[icon]"
     :style="styles">
  </i>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "JuIcon",
  })
  export default class extends Vue {
    /** 图标名，仅支持element 的字体图标，其他图标请开启svg 的支持后使用此项 */
    @Prop({ type: String, required: true })
    icon: string;

    /** 是否svg 图标 */
    @Prop({ type: Boolean, default: false })
    svgIcon: boolean;

    /** 旋转角度，可选：up、down、left、right，或角度数值 */
    @Prop({ type: [String, Number] })
    rotate: string | number;

    get styles() {
      let rotate = this.rotate;
      const styles: any = {};
      if (typeof rotate === "string") {
        switch (rotate.toLowerCase()) {
          case "down":
            rotate = 180;
            break;
          case "left":
            rotate = -90;
            break;
          case "right":
            rotate = 90;
            break;
          case "up":
          default:
            rotate = 0;
            break;
        }
      }
      styles.transform = `rotate(${rotate}deg)`;

      return styles;
    }
  }
</script>

<style lang="scss" scoped>
  .ju-icon {
    width: 1em;
    height: 1em;
    color: currentColor;
    display: inline-block;
    // vertical-align: middle;
    vertical-align: text-bottom; // 当文字高度和图标高度一致时，直接对齐底部即可
    transition: all 0.2s;
  }
  .svg-icon {
    fill: currentColor;
  }
</style>
